<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/jquery.validate.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-validate/localization/messages_es.js"/>"></script>	
<script>

	var pasajeroId = null;
	var eventoId = <c:out value="${eventoId}"/>;
	var registroPasajeroId = <c:out value="${registroPasajeroId}"/>;
    <c:if test="${not empty pasajeroId}">
    pasajeroId = <c:out value="${pasajeroId}"/>;
    </c:if>    	
	var pasajero = {
		id : "",
        registroPasajero: {
        	id: registroPasajeroId,
        	evento: {
        		id: eventoId
        	},
        	cantidadAsistentes: ""
        },				
		persona : {
		    id : "",
            apellido : "",
            nombre : "",
            tipoDoc : "",
            numeroDoc : ""
		},
        acompanianteDe : {
        	id : "",
        	persona: {
                id : "",
                apellido : "",
                nombre : "",
                tipoDoc : "",
                numeroDoc : ""      		
        	}
        },
        acompaniantes : [],
        observacion : ""
	}
	
    $(document).ready(function(){
        $("#mensaje").parent().hide();
        $(".button").button();
        $(".datepicker").live('click', function() {
            $(this).datepicker({
                showOn:'focus',
                dateFormat : 'dd-mm-yy'
                }).focus();
            });
        
        var $form_pasajero = $("#form_pasajero");
        $form_pasajero.submit(function(){return false;});
        $form_pasajero.validate();
        $form_pasajero.hide();
        
        $("#volver").click(function(){
            window.location.href = '<c:url value="/app/page/evento/"/>' + eventoId + "/pasajero";
        });
        $("input[name=pasajero\\.acompaniante]").bind("click", function(){
            var valor = $($(this), ":checked").val();
            if (valor == "true") {
                $("#acompanianteDe").show();
            } else {
                $("#acompanianteDe").hide();
            }
        }); 
        
        $("#acompanianteDe").hide();
        
        
        definirFormulario();
        autocompletePasajero();
        autocompleteAcompanianteDe();
        $.dataLink( pasajero, "#form_pasajero").pushValues();
        $.dataLink("#form_pasajero", pasajero);
    });

	function definirFormulario() {
		var $crear_actualizar = $("#crear_actualizar"); 
		      
		$.dataLink("#form_pasajero", pasajero);
		if (pasajeroId == null) {
		    $("#form_pasajero").show();
		    $crear_actualizar.bind("click", crearPasajero);
		    $.dataLink( pasajero, "#form_pasajero").pushValues();
		} else {
		    jQuery.ajax({
		        type : 'GET',
		        url : '<c:url value="/app/pasajero/id/"/>' + pasajeroId ,
		        contentType : 'application/json',
		        dataType : 'json',
		        success : servicioObtenerPasajeroSuccessCallBack,
		        error : servicioObtenerPasajeroErrorCallBack
		
		    });
		}
		
		$("#pasajero\\.observacion").on("change",function(){
            //$("#pasajero\\.observacion").val($(this).val());
            $.setField( pasajero, "observacion", $(this).val() );
        });
		
	}
	
	function autocompletePasajero() {
	    var cache = {},
        lastXhr;
        $( "#pasajero\\.persona\\.descripcion" ).autocomplete({
            minLength: 2,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( '<c:url value="/app/persona/busqueda"/>', request, 
                    function( data, status, xhr ) {
                        cache[ term ] = data;
                        if ( xhr === lastXhr ) {
                            response( data );
                         }
                    });
            },
            select: function( event, ui ) {
                $("#persona_id").val(ui.item.id);
                $.setField( pasajero, "persona.id", ui.item.id);
                $(this).val( obtenerDescripcionPersona(ui.item) );
                return false;
            },
            change: function(event, ui){
                console.log("ui.item:"+ui.item);
                if (ui.item == null || ui.item == undefined) {
                    console.log("no selecciono ninguno");
                    $(this).val("");
                    $("#persona_id").val("");
                    $.setField( pasajero, "persona.id", "");
                }
            }
        }).data( "autocomplete" )._renderItem = function ( ul, item ) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + obtenerDescripcionPersona(item) + "</a>" )
            .appendTo( ul );
        };
	}
	
	function autocompleteAcompanianteDe() {
        var cache = {},
        lastXhr;
        $( "#pasajero\\.acompanianteDe" ).autocomplete({
            minLength: 2,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }                
                lastXhr = $.getJSON( '<c:url value="/app/registroPasajero/evento/id/' + eventoId + '/pasajero/miembro"/>', request, 
                    function( data, status, xhr ) {
                        cache[ term ] = data;
                        if ( xhr === lastXhr ) {
                            response( data );
                         }
                    });
            },
            select: function( event, ui ) {
            	console.log("Selecciono: "+ui.item.id);
                $("#acompanianteDe_id").val(ui.item.id);
                $.setField( pasajero, "acompanianteDe.id", ui.item.id);
                $(this).val( obtenerDescripcionAcompanianteDe(ui.item) );
                return false;
            },
            change: function(event, ui){
                console.log("ui.item:"+ui.item);
                if (ui.item == null || ui.item == undefined) {
                    console.log("no selecciono ninguno");
                    $(this).val("");
                    $("#acompanianteDe_id").val("");
                    $.setField( pasajero, "acompanianteDe.id", "");
                }
            }
        }).data( "autocomplete" )._renderItem = function ( ul, item ) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + obtenerDescripcionAcompanianteDe(item) + "</a>" )
            .appendTo( ul );
        };
    }
 	
	function crearPasajero(){
        if (!$("#form_pasajero").valid()){
            return false;
        }  
        jQuery.ajax({
            type : 'POST',
            url : '<c:url value="/app/registroPasajero"/>',
            contentType : 'application/json',
            dataType : 'json',
            data : $.toJSON(pasajero),
            success : servicioIngresarPasajeroSuccessCallBack,
            error : servicioIngresarPasajeroErrorCallBack

        });
    }
    function actualizarPasajero(){
        var esAcompaniante = $("input[name=pasajero\\.acompaniante]:checked").val();
    	if (esAcompaniante == "false") {
    		$("#acompanianteDe_id").val("");
            $.setField( pasajero, "acompanianteDe.id", "");
        }
    	if (!$("#form_pasajero").valid()){
            return false;
        }  
        jQuery.ajax({
            type : 'PUT',
            url : '<c:url value="/app/registroPasajero"/>',
            contentType : 'application/json',
            dataType : 'json',
            data : $.toJSON(pasajero),
            success : servicioActualizarPasajeroSuccessCallBack,
            error : servicioActualizarPasajeroErrorCallBack

        });
    }
	
    function servicioObtenerPasajeroSuccessCallBack(data) {
        jsonObjectMerge(data, pasajero);
        
        var $crear_actualizar = $("#crear_actualizar"); 
        $crear_actualizar.bind("click", actualizarPasajero);
        $("#crear_actualizar span").text("Actualizar pasajero");
        $("#breadcrumb_actual").text("Actualizando "+pasajero.persona.apellido + ", " + pasajero.persona.nombre);
        $("#form_pasajero").show();
        $.dataLink( pasajero, "#form_pasajero").pushValues();
        $("#pasajero\\.persona\\.descripcion").val(obtenerDescripcionPersona(pasajero.persona));
        console.log("pasajero.acompanianteDe: "+pasajero.acompanianteDe);
        if (pasajero.acompanianteDe != null && pasajero.acompanianteDe.id > 0) {
        	$("#pasajero\\.acompanianteDe").val(obtenerDescripcionAcompanianteDe(pasajero.acompanianteDe));
            $("#acompanianteDe").show();
            $("#pasajero\\.conAcompaniante").attr("checked", "checked");
        }
        
    } 
    function servicioIngresarPasajeroSuccessCallBack(data) {
        jsonObjectMerge(data, pasajero);
        $.dataLink( pasajero, "#form_pasajero").pushValues();
        servicioSuccessMensaje("#mensaje","El pasajero se ingres&oacute; correctamente en el sistema");
        $("#crear_actualizar").unbind("click").bind("click", actualizarPasajero);
        $("#crear_actualizar span").text("Actualizar persona");
        $("#breadcrumb_actual").text("Actualizando "+pasajero.persona.apellido + ", " + pasajero.persona.nombre);
    } 
    function servicioActualizarPasajeroSuccessCallBack(data) {
        jsonObjectMerge(data, pasajero);
        $.dataLink( pasajero, "#form_pasajero").pushValues();
        servicioSuccessMensaje("#mensaje","El pasajero se actualiz&oacute; correctamente");
    }
    function servicioObtenerPasajeroErrorCallBack(data) {
        servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al obtener informaci&oacute;n del pasajero", data);
    }
    function servicioActualizarPasajeroErrorCallBack(data) {
    	if (data.status == 412) {
            var responseObject = jQuery.parseJSON( data.responseText );
            servicioErrorMensaje("#mensaje", responseObject.error, data);
        } else {
        	servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al actualizar la informaci&oacute;n del pasajero", data);
        }
       
    }
    function servicioIngresarPasajeroErrorCallBack(data) {
    	if (data.status == 412) {
    		var responseObject = jQuery.parseJSON( data.responseText );
    	    servicioErrorMensaje("#mensaje", responseObject.error, data);
    	} else {
    		 servicioErrorMensaje("#mensaje", "Ocurri&oacute; un error al ingresar la informaci&oacute;n del pasajero", data);
    	}
    }
    
    function obtenerDescripcionAcompanianteDe(unAcompaniante) {
    	return obtenerDescripcionPersona(unAcompaniante.persona);
    }
    function obtenerDescripcionPersona(unaPersona) {
    	var descripcion = unaPersona.apellido + " " + unaPersona.nombre + ", ";
    	if (unaPersona.tipoDoc != null) {
    		descripcion = descripcion + unaPersona.tipoDoc + " ";
    	}
    	if (unaPersona.numeroDoc != null) {
            descripcion = descripcion + unaPersona.numeroDoc;
        }
    	return descripcion;
    }
</script>
    <div class="row">
        <h2>Pasajero</h2>
        <div class="contenedor_mensaje col col_16">
            <div  id="mensaje"></div>
        </div>
    </div>
    <div class="row steps content_form">
        <div class="col col_3">&nbsp;</div>
        <div class="col col_10">
            <form id="form_pasajero" name="form_pasajero">
                <fieldset class="step s_column" id="seccion_pasajero">
                <legend>Pasajero</legend>
                    <div>
                        <label for="pasajero.persona.descripcion">Pasajero*</label> 
                        <input id="pasajero.persona.descripcion" name="pasajero.persona.descripcion" type="text" class="required"/>
                        <input type="hidden" name="pasajero.persona.id" id="persona_id" data-jq-linkto="persona.id" data-jq-linkfrom="persona.id"/>
                    </div>
                    <div class="radio_column">
                        <span class="label">Es acompa&ntilde;ante</span>
                        <div>
                            
                            <input id="pasajero.conAcompaniante" name="pasajero.acompaniante" type="radio" value="true" />
                            <label for="pasajero.conAcompaniante">Si</label> 
                            
                            <input id="pasajero.sinAcompaniante" name="pasajero.acompaniante" type="radio"  value="false" checked="checked"/>
                            <label for="pasajero.sinAcompaniante">No</label>
                        </div>
                    </div>
                    <div id="acompanianteDe">
                        <label for="pasajero.acompanianteDe">Acompa&ntilde;ante de*</label> 
                        <input id="pasajero.acompanianteDe" name="pasajero.acompanianteDe" type="text" class="required"/>
                        <input type="hidden" name="pasajero.acompanianteDe.id" id="acompanianteDe_id" data-jq-linkto="acompanianteDe.id" data-jq-linkfrom="acompanianteDe.id" checked="checked"/>
                    </div>
                    
                    <div>
                        <label for="pasajero.observacion">Observaciones</label> 
                        <textarea id="pasajero.observacion" name="pasajero.observacion" data-jq-linkto="observacion" data-jq-linkfrom="observacion" maxlength="512"></textarea>
                    </div>
                </fieldset>
		        <button class="button" id="crear_actualizar">Crear </button>
                <button class="button" id="volver" class="cancel">Volver al listado</button>
		    </form>
		    
        </div>
        <div class="col col_3">&nbsp;</div>
    </div>        
